<template>
  <div>
    <h2>{{ str }}</h2>

    <!-- V-model.修饰符="xxx" -->
    <!-- V-model.lazy="xx"   -----   会在输入框失去焦点后，才会更新数据 -->
    <!-- V-model.number="xx"   -----   会自动转换为数字 -->
    <!-- V-model.trim="xx"   -----   会把数据两边的空白去掉 -->
    <input type="text" v-model.lazy="str" /><br />
    <input type="text" v-model.number="age" /><br />
    <input type="text" v-model.trim="uname" /><br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "吱吱是臭宝",
      age: 21,
      uname: "zhi",
    };
  },
};
</script>

<style>
h2 {
  color: skyblue;
}
</style>